<template>
  <div class="transQuery_main">
    <h3>终端回调</h3>
    <a-form @submit="handleInput" :form="form" style="margin-top:30px;">
      <a-form-item v-bind="formItemLayout" label="下级合作机构">
        <div>
          <a-select
            showSearch
            :notFoundContent="null"
            :defaultActiveFirstOption="false"
            :filterOption="false"
            v-decorator="[
                    'agentMemberNo',
                    {rules: [{ required: true, message: '请选择下级合作机构' }]}
                  ]"
            placeholder="请选择下级合作机构"
          >
            <a-select-option
              v-for="d in childAgentList"
              @click="setagentname(d.shortName)"
              :key="d.memberNo"
            >{{d.shortName}}</a-select-option>
          </a-select>
        </div>
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="起始SN设备号">
        <a-input
          @blur="setstartSncode"
          placeholder="起始SN设备号"
          v-decorator="[
                        'startSncode',
                        {rules: [{ required: true, message: '请填写起始SN设备号' }]}
                      ]"
        />
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="结束SN设备号">
        <a-input
          @blur="setendSncode"
          placeholder="结束SN设备号"
          v-decorator="[
                        'endSncode',
                        {rules: [{ required: true, message: '请填写结束SN设备号' }]}
                      ]"
        />
      </a-form-item>
      <br />
      <div style="text-align: center;">
        <a-button class="button_sty" type="primary" :loading="loading" html-type="submit">回调</a-button>
      </div>
    </a-form>

    <h3>历史回调记录</h3>
    <a-table
      size="middle"
      :scroll="{ y: '38vh' }"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="record => record.transOrderNo"
    ></a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="query.pageSize"
      style="margin-top: 20px"
    />

    <a-modal style="top: 250px;" :visible="RelieveVisible" :footer="null">
      <div class="modalClass">
        <span>起始SN设备号：{{startSncode}}</span>
        <span>结束SN设备号：{{endSncode}}</span>
        <span>合计数量：{{SNno}}</span>
        <span>确认从 {{agentname}} 进行回调</span>
        <div class="footClass">
          <a-button class="btnClass" type="primary" @click="handleOk">确认</a-button>
          <a-button class="btnClass" type="primary" @click="handleCancelRelieve">取消</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  {
    title: "批次号",
    dataIndex: "transferBatchNo",
    width: "12%",
    align: "center"
  },
  {
    title: "操作时间",
    dataIndex: "ctime",
    width: "12%",
    align: "center"
  },
  {
    title: "起始SN设备号",
    dataIndex: "startSncode",
    width: "12%",
    align: "center"
  },
  {
    title: "结束SN设备号",
    dataIndex: "endSncode",
    width: "12%",
    align: "center"
  },
  { title: "合计数量", dataIndex: "nums", width: "12%", align: "center" },
  {
    title: "下级合作机构名称",
    dataIndex: "fromAgentName",
    width: "12%",
    align: "center"
  }
  // {
  //   title: "活动名称",
  //   dataIndex: "fromAgentName",
  //   width: "12%",
  //   align: "center"
  // },
];

export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },

  data() {
    return {
      form: this.$form.createForm(this),
      today: new Date(),
      columns,
      SNno: 0,
      statusList: [],
      childAgentList: [{ memberNo: null, shortName: null }],
      transTypeList: [],
      querydata: {
        fromAgentMemberNo: null,
        fromAgentName: null,
        startSncode: null,
        endSncode: null,
        type: "back",
        ypeName: "回调",
        nums: null,
        sncodes: null
      },
      query: {
        page: 1,
        pageSize: 10,
        data:"back"
      },
      pagination: { current: null, total: null },
      list: [],
      count: null,
      agentname: "",
      endSncode: "",
      startSncode: "",
      RelieveVisible: false,
      loading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 10, offset: 1 },
          md: { span: 10, offset: 1 }
        }
      }
    };
  },

  mounted() {
    this.handleSearch();
    this.getSelect();
  },
  methods: {
    moment,
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);
      this.query.page = page;
      this.query.pageSize = pageSize;
      this.handleSearch();
    },

    handleOk() {
      this.$axios
        .post("/agent/agent/terminal/back", this.querydata)
        .then(res => {
          if (res.data.code == "OK") {
            this.$message.success("终端回调成功！");
            this.querydata = {
              fromAgentMemberNo: null,
              fromAgentName: null,
              startSncode: null,
              endSncode: null,
              type: "back",
              ypeName: "回调",
              nums: null,
              sncodes: null
            };
            this.form.setFieldsValue({
              agentMemberNo: null,
              startSncode: null,
              endSncode: null
            });
            this.handleSearch();
            this.RelieveVisible = false;
          } else {
            this.RelieveVisible = false;
            this.$message.error(res.data.message);
            return false;
          }
        });
    },
    handleCancelRelieve(e) {
      this.RelieveVisible = false;
    },
    setagentname(name) {
      this.agentname = name;
    },
    setstartSncode(e) {
      // console.log(e.target.value)
      this.startSncode = e.target.value;
    },
    setendSncode(e) {
      this.endSncode = e.target.value;
    },
    handleInput(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          // console.log(values)
          this.loading = true;
          this.$axios
            .get(
              "/agent/agent/terminal/getSncodes/" +
                values.startSncode +
                "/" +
                values.endSncode
            )
            .then(
              res => {
                this.loading = false;
                if (res.data.code == "OK") {
                  this.SNno = res.data.data.nums;
                  this.RelieveVisible = true;
                  this.querydata = {
                    fromAgentMemberNo: values.agentMemberNo,
                    fromAgentName: this.agentname,
                    startSncode: values.startSncode,
                    endSncode: values.endSncode,
                    type: "back",
                    typeName: "回调",
                    nums: res.data.data.nums,
                    sncodes: res.data.data.sncodes
                  };
                } else {
                  this.$message.error(res.data.message);
                  return false;
                }
              },
              err => {
                this.loading = false;
                this.$message.error(err.message);
              }
            );
        }
      });
    },
    getSelect() {
      this.$axios.get("/agent/agent/terminal/getAddDropDownList").then(res => {
        if (res.data.code == "OK") {
          this.childAgentList = res.data.list;
        } else {
          this.childAgentList = [{ memberNo: null, shortName: null }];;
          this.$message.error(res.data.message);
          return false;
        }
      });
    },
    handleSearch() {
      this.$axios.post("/agent/agent/terminal/getAddData",this.query).then(res => {
        if (res.data.code == "OK") {
          // this.childAgentList = res.data.data.childAgentList;
          this.list = res.data.list;
          this.pagination.current = res.data.current
          this.pagination.total = res.data.total
          console.log(this.childAgentList);
        } else {
          this.list = [];
          this.pagination.current = 1
          this.pagination.total = 0
          // this.childAgentList = [{ memberNo: null, shortName: null }];
          this.$message.error(res.data.message);
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

span {
  cursor: pointer;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  padding: 40px 70px;
}

.button_sty {
  width: 10vw;
}

.modalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 20px;
}

.modalClass span {
  font-size: 17px;
  font-weight: 400;
  margin-top: 5px;
  margin-bottom: 5px;
}

.modalClass p {
  margin-bottom: 10px;
}

.footClass {
  width: 60%;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}
</style>